@import "variables", "utilities";

form {
  width: 100%;
  @include box-sizing(border-box);

  &.form-flex {

    .flex-group {
      @include flexbox;

      margin: 0;

      .flex1 {
        @include box-flex(1);
      }

      .flex2 {
        @include box-flex(2);
      }

      .flex3 {
        @include box-flex(3);
      }

      > :nth-child(n) {
        margin-left: 10px;
      }

      > :first-child {
        margin-left: 0;
      }
    }

  }
}

[class*="flex"].input-text + [class*="flex"].input-text {
  margin-left: 10px;
}

.input-text {
  @include box-sizing(border-box);
  display: block;
  outline: none;
  border: none;
  border-bottom: 1px solid $input-text-border-color;
  padding: 10px 10px 0;
  width: 100%;
  height: $bar-height;
  background: transparent;
  color: $input-text-color;
  font-size: 14px;
  vertical-align: middle;
  -webkit-transition: border ease-out 0.2s;
     -moz-transition: border ease-out 0.2s;
          transition: border ease-out 0.2s;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-family: $base-font-family;
  font-weight: normal;

  &:focus {
    border-bottom: 1px solid $input-text-border-highlight-color;
  }

  &[type="password"] {
    font-family: $mono-font-family;
  }
}

legend.form-legend,
label.block-label {
  @include box-sizing(border-box);

  display: block;
  padding: 5px 5px 3px;
  margin-top: 10px;
  width: 100%;
  border-bottom: 2px solid $form-legend-label-border-color;
  font-size: 14px;
  font-weight: bold;
  line-height: 18px;
  text-transform: uppercase;
  color: $form-legend-label-text-color;
}

label.inline-label {
  display: block;
}

.form-actions {
  margin-top: 20px;
}

.input-pretty {
  position: relative;
  display: block;
  margin-bottom: 8px;

  &:before,
  &:after {
    position: absolute;
    content: '';
    bottom: 0;
    height: 5px;
    width: 1px;
    background: $input-text-border-color;
    -webkit-transition: background ease-out 0.2s;
       -moz-transition: background ease-out 0.2s;
            transition: background ease-out 0.2s;
  }

  &:before {
    left: 0;
  }

  &:after {
    right: 0;
  }

  &.focus {

    &:before,
    &:after {
      background: $input-text-border-highlight-color;
    }

  }
}

.input-switch-wrapper {
  position: relative;
  display: inline-block;
  width: 96px;

  padding: 12px 0;

  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;

  .input-switch {
    display: none;

    &:checked + .input-switch-outer .input-switch-button {
      background-color: $primary-button-active-color;

      -webkit-transform: translateX(100%);
              transform: translateX(100%);

      &:before {
        content: 'On';
      }
    }
  }

  .input-switch-outer {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 0px solid $input-switch-border-color;
    border-radius: 0px;

    .input-switch-inner {

      background: $input-switch-background-color;

      .input-switch-button {
        @include border-radius(2px);

        position: relative;
        width: 48px;
        height: 24px;
        font-size: 14px;
        font-weight: 200;
        text-transform: uppercase;
        text-align: center;
        line-height: 24px;
        background-color: $input-switch-button-color;
        color: $input-switch-text-color;

        -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 2px 3px rgba(0,0,0,0.5);
           -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.25), inset 0 2px 0 rgba(0, 0, 0, 0.25), 0 2px 3px rgba(0,0,0,0.5);
                box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 2px 3px rgba(0,0,0,0.5);

        -webkit-transition: all 0.1s ease-out;
                transition: all 0.1s ease-out;

        -webkit-transform: translateX(0);
                transform: translateX(0);

        &:before {
          @include absolute-position(0, 0, 0, 0);
          content: 'Off';
          width: 100%;
          height: 100%;
        }
      }

    }
  }
}

.input-radio-wrapper {
  display: inline-block;
  width: 32px;
  height: 32px;
  padding: 8px;

  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;

  .input-radio {
    position: absolute;
    left: -9999px;

    &:checked {

      &[disabled] {
        + .input-radio-inner .input-radio-button {
          background: rgba($gray-dark, 0.8);

          -webkit-box-shadow: 0 0 4px rgba($gray-dark, 0.8), inset 0 1px 0 rgba($white, 0.5);
             -moz-box-shadow: 0 0 4px rgba($gray-dark, 0.8), inset 0 1px 0 rgba($white, 0.5);
                  box-shadow: 0 0 4px rgba($gray-dark, 0.8), inset 0 1px 0 rgba($white, 0.5);
        }
      }

      + .input-radio-inner .input-radio-button {
        background: $primary-color;

        -webkit-box-shadow: 0 0 4px rgba($primary-color, 0.8), inset 0 1px 0 rgba($white, 0.5);
           -moz-box-shadow: 0 0 4px rgba($primary-color, 0.8), inset 0 1px 0 rgba($white, 0.5);
                box-shadow: 0 0 4px rgba($primary-color, 0.8), inset 0 1px 0 rgba($white, 0.5);
      }
    }

    &:active + .input-radio-inner {
      background: rgba($primary-color, 0.5);
      border-color: rgba($white, 0.8);

      -webkit-box-shadow: 0 0 2px 7px rgba($primary-color, 0.5);
         -moz-box-shadow: 0 0 2px 7px rgba($primary-color, 0.5);
              box-shadow: 0 0 2px 7px rgba($primary-color, 0.5);
    }

    &[disabled] + .input-radio-inner {
      border-color: rgba($gray-dark, 0.8);
    }

    &:focus {

      &[disabled] {
        + .input-radio-inner:before {
          border-color: rgba($secondary-color, 0.6);
        }
      }

      + .input-radio-inner:before {
        @include border-radius(20px);
        position: absolute;
        display: block;
        content: '';
        top: -4px;
        left: -4px;
        width: 20px;
        height: 20px;
        border: 1px solid $secondary-color;
      }
    }
  }

  .input-radio-inner {
    @include border-radius(16px);

    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    border: 1px solid $primary-button-color;
    cursor: pointer;

    -webkit-transition: all 0.1s ease-out;
            transition: all 0.1s ease-out;

    &:active {
      background: rgba($primary-color, 0.5);
      border-color: rgba($white, 0.8);

      -webkit-box-shadow: 0 0 2px 7px rgba($primary-color, 0.5);
         -moz-box-shadow: 0 0 2px 7px rgba($primary-color, 0.5);
              box-shadow: 0 0 2px 7px rgba($primary-color, 0.5);
    }

    &:focus {
      outline: none;
    }

    .input-radio-button {
      @include border-radius(8px);

      width: 8px;
      height: 8px;
      margin: 3px;

      background: transparent;
    }
  }
}

.input-checkbox-wrapper {

  display: block;
  width: 32px;
  height: 32px;
  padding: 8px;

  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;

  .input-checkbox {
    position: absolute;
    left: -9999px;

    &:checked {

      &[disabled] {
        + .input-checkbox-outer .input-checkbox-button {
          background: transparent;

          &:before {
            border-color: rgba($gray-dark, 0.8);
          }

          &:after {
            border-color: transparent;
          }
        }
      }

      &:active:not([disabled]) {
        + .input-checkbox-outer .input-checkbox-button {
          border-color: transparent;

          &:before {
            border-color: $white;
          }

          &:after {
            border-color: rgba($white, 0.5)
          }
        }

      }

      + .input-checkbox-outer .input-checkbox-button {
        position: absolute;
        top: -9px;
        width: 10px;
        right: -4px;
        height: 18px;
        border: solid #222;
        border-width: 0 6px 6px 0;

          -webkit-transform: rotate(45deg);
             -moz-transform: rotate(45deg);
                  transform: rotate(45deg);

        &:before,
        &:after {
          position: absolute;
          content: '';
          width: 5px;
        }

        &:before {
          top: 2px;
          right: -5px;
          height: 12px;
          border: solid $primary-color;
          border-width: 0 3px 3px 0;
          height: 12px;
        }

        &:after {
          top: 1px;
          right: -4px;
          height: 15px;
          border: solid rgba($primary-color, 0.5);
          border-width: 0 2px 2px 0;

          -webkit-filter: blur(2px);
             -moz-filter: blur(2px);
                  filter: blur(2px);
        }
      }
    }

    &:active + .input-checkbox-outer {
      background: rgba($primary-color, 0.5);
      border-color: rgba($white, 0.8);

      -webkit-box-shadow: 0 0 2px 7px rgba($primary-color, 0.5);
         -moz-box-shadow: 0 0 2px 7px rgba($primary-color, 0.5);
              box-shadow: 0 0 2px 7px rgba($primary-color, 0.5);
    }

    &[disabled] + .input-checkbox-outer {
      border-color: rgba($gray-dark, 0.8);
    }

    &:focus {

      &[disabled] {
        + .input-checkbox-outer:before {
          border-color: rgba($secondary-color, 0.6);
        }
      }

      + .input-checkbox-outer:before {
        position: absolute;
        display: block;
        content: '';
        top: -4px;
        left: -4px;
        width: 20px;
        height: 20px;
        border: 1px solid $secondary-color;
      }
    }
  }

  .input-checkbox-outer {

    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    border: 1px solid $primary-button-color;
    cursor: pointer;

    -webkit-transition: all 0.1s ease-out;
            transition: all 0.1s ease-out;

    &:active {
      background: rgba($primary-color, 0.5);
      border-color: rgba($white, 0.8);

      -webkit-box-shadow: 0 0 2px 7px rgba($primary-color, 0.5);
         -moz-box-shadow: 0 0 2px 7px rgba($primary-color, 0.5);
              box-shadow: 0 0 2px 7px rgba($primary-color, 0.5);
    }

    &:focus {
      outline: none;
    }

    .input-checkbox-button {

      width: 8px;
      height: 8px;
      margin: 3px;

      background: transparent;
    }
  }
}